<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<!--
列表渲染：通过循环来遍历data或固定次数的值 （数组 对象 字符串 循环x-y次）
 v-for="(item,index) in 遍历的对象"  item表示每次出来存储的变量 index生成索引
-->

<div id="app">
    <!--遍历数组-->
    <h2>学生列表</h2>
    <ul>
        <li v-for="student in stus">
            {{student.id}}-{{student.name}}-{{student.age}}
        </li>
    </ul>

    <ul>
        <li v-for="(student,index) in stus" :key="index">
            {{index}}-{{student.id}}-{{student.name}}-{{student.age}}
        </li>
    </ul>

    <!--遍历对象 对象中遍历索引是对象的属性名-->
    <h2>dog对象</h2>
    <ul>
        <li v-for="(d,k) of dog">
            {{k}}-{{d}}
        </li>
    </ul>

    <!--遍历字符串(用的少)-->
    <ul>
        <li v-for="(s,index) of str" :key="index">
            {{index}} - {{s}}
        </li>
    </ul>

    <!--遍历指定的次数-->
    <span v-for="(number,index) of 100" :key="index">
      <!-- {{index}} - -->
        <span v-if="number % 2 == 0">
            {{number}}
        </span>


    </span>

</div>

<script>
    new Vue({
        el:'#app',
        data(){
            return{
                name:'张三',
                //数组（对象）
                stus:[
                    {id:'001',name:'张三',age:18},
                    {id:'002',name:'李四',age:19},
                    {id:'003',name:'王五',age:20}
                ],
                //对象
                dog:{
                    name:'阿黄',
                    age:5,
                    love:99
                },
                //字符串
                str:'helloworld'
            }
        },

    });

</script>

</body>
</html>